<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
    <title>啄木鸟管理平台</title>
    <th:block th:replace="common/common :: jscss" />
    <!-- 日期插件 -->
    <style>
        /* Border styles */

        table {
            border-collapse: collapse;
            width: 100%
        }
        /* Padding and font style */

        table td,
        table th {
            border-collapse: collapse;
            height: 34px;
            font-size: 12px;
            font-family: Verdana;
            color: #333;
            background-color: #fff
        }

        .btn {
            position: relative;
            display: inline-block;
            margin: 0;
            padding: 5px 10px;
            width: 90px;
            text-align: center;
            border: 1px solid #E2E2E2;
            border-radius: 0;
            background: #F8F8F8;
            background-image: none !important;
            box-shadow: none !important;
            color: #4C4C4C;
            vertical-align: middle;
            text-align: center;
            line-height: 25px;
            cursor: pointer;
            -webkit-transition: all ease .15s;
            transition: all ease .15s;
        }

        .table-box {
            padding: 0 30px;
        }

        .holiday {
            color: #f00;
            display: block;
            text-align: center;
        }

        .title-top {
            margin: 0 25px;
            font-size: 20px;
            text-align: center;
            padding: 10px 0;
            border-bottom: 1px solid #ddd
        }

        .date-table td {
            border-bottom: 1px solid #eee;
            width: 14.28%;
            text-align: center;
            vertical-align: top;
        }

        .date-table td.disabled {
            color: #bbb
        }

        .date-table td:nth-child(6),
        .date-table td:nth-child(7) {
            color: #ffc642
        }

        .date-table td .date {
            display: inline-block;
            width: 65px;
            line-height: 56px;
            text-align: center;
            cursor: pointer
        }

        .date-table td.disabled .date {
            cursor: not-allowed;
        }

        .date-table td.selected .date {
            color: #fff;
            background-color: #409eff;
        }

        .date-table thead td {
            vertical-align: middle;
            padding: 6px 0;
            height: 34px;
        }

        .tip-status-row {
            padding: 20px 10px 10px;
            font-size: 14px;
            text-align: center;
            border-top: 1px solid #ddd;
            margin-top: -1px
        }

        .tip-status-row .status-span {
            display: inline-block;
            margin-right: 30px;
            position: relative;
            padding-left: 22px;
        }

        .tip-status-row .status-span:after {
            content: "";
            display: inline-block;
            width: 12px;
            height: 12px;
            position: absolute;
            top: 3px;
            left: 0;
            border: 1px solid #ddd
        }

        .tip-status-row .blue-status:after {
            background-color: #409eff;
            border-color: #409eff;
        }

        .tip-status-row .grey-status:after {
            background-color: #eee;
            border-color: #eee
        }

        .time-table td {
            width: 14.28%;
            box-sizing: border-box;
            padding: 8px 15px;
            text-align: center;
            height: 28px;
            line-height: 28px;
        }

        .time-table .time-span {
            display: block;
            line-height: 35px;
            text-align: center;
            background-color: #fff;
            border: 1px solid #eee;
            cursor: pointer;
        }

        .time-table .disabled .time-span {
            background-color: #eee;
            color: #999;
            cursor: default;
        }

        .time-table .selected .time-span {
            background-color: #409eff;
            color: #fff
        }

        .btn-box {
            padding: 20px 0;
            border-top: 1px solid #eee;
            margin-top: 20px;
            text-align: center;
        }
        
        .nowPosition {}
        
        .time-table .nowPosition .time-span {
            background: #409eff url(../../static/images/position.png) no-repeat right bottom!important;
            background-size: 15px 15px!important;
        }
        
        .time-table .hasChange .time-span {
            background: #409eff url(../../static/images/choose.png) no-repeat right bottom!important;
            background-size: 15px 15px!important;
            color: #fff!important;
        }

        .time-table .currentSelected .time-span{
            background: #ccc;
            color: #fff!important;
        }
        
        .time-table .selected .time-span {
            background: #409eff;
            color: #fff!important;
        }
    </style>
</head>

<body>
    <div class="layui-row">
        <div class="layui-card" style="padding-bottom: 25px;">
            <div class="layui-card-body">
                <div id="dutytime-picker">

                </div>
            </div>
        </div>
    </div>

    <script type="x-template" id="dutyTime">
        <div>
            <div class="table-box">
                <div class="layui-btn-container">
                    <button :class="['layui-btn', tab.value === month ? 'layui-btn-normal' : 'layui-btn-primary']" type="button" v-for="tab in tabList" @click="handleMonthClick(tab)">
                    {{ tab.text }}
                </button>
                </div>
                <table class="table date-table" id="calendarDate">
                    <thead>
                        <tr>
                            <td>周一</td>
                            <td>周二</td>
                            <td>周三</td>
                            <td>周四</td>
                            <td>周五</td>
                            <td>周六</td>
                            <td>周日</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="dateList in dateListGroup">
                            <td :class="{ disabled: item.disabled, selected: item.date === date }" v-for="item in dateList" :key="item.date" @click="handleDateClick(item)">
                                <span class="date">{{ item.date | date }}</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="tip-status-row">
                    <span class="status-span white-status">空闲可约</span>
                    <span class="status-span grey-status">排期已满</span>
                    <span id="spStock" class="status-span grey-status" style="display: none">当前服务商库存已满</span>
                    <span class="status-span blue-status">已选择</span>
                </div>
                <table class="table time-table" id="calendarTime">
                    <tbody>
                        <tr v-for="(timeList,timeNum) in timeListGroup" :key="timeNum">
                            <template v-if="defaultChooseData.length>0">
                                <td v-for="(item,index) in timeList" :class="{ hasChange:(time != '' && changeData.startIndex<=(Number(index)+Number(timeNum*7)) && changeData.endIndex>(Number(index)+Number(timeNum*7))), disabled: item.disabled, currentSelected:isChoose(Number(index)+Number(timeNum*7)),nowPosition:(chooseData.startIndex <= (Number(index)+Number(timeNum*7))&&chooseData.endIndex > (Number(index)+Number(timeNum*7)))}"  :key="item.time" @click="newHandleTimeClick(item,Number(index)+Number(timeNum*7))" :title="getTitleWorkId(Number(index)+Number(timeNum*7))">
                                    <span class="time-span">{{ item.time }}</span>
                                </td>
                            </template>
                            <template v-else>
                                <td :class="{ disabled: item.disabled, selected: item.time === time }" v-for="item in timeList" :key="item.time" @click="handleTimeClick(item)">
                                    <span class="time-span" @click="check(item.time)">{{ item.time }}</span>
                                </td>
                            </template>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="layui-hide" id="tip" style="color: red; text-align: center">注：未在服务时段，请另选预约时间</div>
            <div class="btn-box">
                <button class="layui-btn" @click="handleSubmit">确认选择</button>
                <button class="layui-btn layui-btn-primary" @click="handleCancel">取消</button>
            </div>
        </div>

    </script>

<script type="text/javascript">
    layui.config({
        base: "/static/js/module/",
        version: 20221013001
    }).extend({
        oms_order_dutytime: "order/zmn.oms.order.dutytime"
    }).use(['index', 'oms_order_dutytime']);
</script>

</body>

</html>